<!-- 推荐电子书 -->
<template>
    <div class="affix-container">
        <h4 style="padding-top: 10px; margin-left: 10px; ">
            <span>电子书</span>
            <el-button style="width: 100px;margin-left: 1000px;cursor: pointer;" @click="goBack">查看更多</el-button>
        </h4>
        <el-row>
            <el-col v-for="(item, index) in carouselData" :key="index" :span="4" :offset="index > 0 ? 2 : 0">
                <el-card :body-style="{ padding: '5px' }" style="width: 252px;margin-top: 20px; cursor: pointer;" @click="goBackcoudetails(item.courseId)">
                    <img :src="item.courseCover" class="image" /> <!-- 假设每个对象有一个imageUrl属性 -->
                    <div style="padding: 14px;text-align: center;height: 30px;">
                        <span class="crousename">{{ item.courseName }}</span> <!-- 假设每个对象有一个title属性 -->
                    </div>
                    <div style="height: 35px;">
                        <span class="cprice">{{ '￥' + item.courseCPrice }}</span>
                        <span class="oprice">{{ '￥' + item.courseOPrice }}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
 
<script>
import { ref, onMounted } from 'vue'
import { reactive, toRefs } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import axios from '../../api/index';
import router from '@/router';

export default {
    setup() {
        const carouselData = ref([]);

        //发起请求返回热销的数据
        onMounted(async () => {
            try {
                const response = await axios.get('/course/findRecCourses');
                if (response.code === 200) {
                    console.log(response.data);
                    carouselData.value = response.data;
                }
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            }
        });
        function goBack() {
            router.push('/ebook')
        }
        function goBackcoudetails(Item) {
            router.push("/productChild/" + Item)
        }
        return {
            goBackcoudetails,
            carouselData,
            goBack,
        };

    },
}

</script>

<style>
.cprice {
    font-size: 25px;
    color: red;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.oprice {
    font-size: 14px;
    text-decoration-line: line-through;
    margin-left: 10px;
    color: rgb(33, 129, 238);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ebook {
    margin-top: 20px;
    float: left;
    margin-left: 38px;
}

.image {
    width: 240px;
    height: 140px;
    display: block;
}
.crousename{
    font-size: 16px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(0, 0, 0);
}</style>